import {useState} from 'react';
import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {Field} from './Field.tsx';
import {Helper, Link, Locale, TextInput, Button, Block} from '../../components';

<Meta
  title="Components/Field"
  component={Field}
  argTypes={{
    children: {table: {type: {summary: ['Helper[]', 'Input']}}},
    locale: {table: {type: {summary: ['string', 'Locale']}}, type: 'string'},
  }}
  args={{
    label: 'My field label',
  }}
/>

# Field

## Usage

The Field component is used to display information around an Input component.

## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      return (
        <Field {...args}>
          <TextInput placeholder="Type your text here" />
        </Field>
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Variation on completeness

<Canvas>
  <Story name="Completeness">
    {args => {
      const [value, setValue] = useState('');
      const handleChange = newValue => setValue(newValue);
      return (
        <Field {...args} incomplete={true}>
          <TextInput
            placeholder="This field is required for completeness"
            value={value}
            onChange={handleChange}
            characterLeftLabel={`${250 - value.length} characters left`}
          />
        </Field>
      );
    }}
  </Story>
</Canvas>

## Variation on Channel and Locale

<Canvas>
  <Story name="Channel and Locale">
    {args => {
      return (
        <>
          <Field {...args} channel="ecommerce">
            <TextInput placeholder="Type your text here" />
          </Field>
          <Field {...args} locale="en_US">
            <TextInput placeholder="Type your text here" />
          </Field>
          <Field {...args} channel="mobile" locale="fr_FR">
            <TextInput placeholder="Type your text here" />
          </Field>
          <Field
            {...args}
            label="私のフィールドラベル"
            channel="モバイル"
            locale={<Locale code="jp_JP" languageLabel="日本人" />}
          >
            <TextInput placeholder="ここにテキストを入力してください" />
          </Field>
        </>
      );
    }}
  </Story>
</Canvas>

## With Helpers

<Canvas>
  <Story name="Helpers">
    {args => {
      return (
        <>
          <Field {...args}>
            <TextInput placeholder="Type your text here" />
            <Helper level="info">
              This is just an info. <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Don't click here</Link>
            </Helper>
          </Field>
          <Field {...args} label="Another one">
            <TextInput invalid={true} placeholder="Type your text here" />
            <Helper level="error">
              But this is an error. <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Link</Link>
            </Helper>
          </Field>
        </>
      );
    }}
  </Story>
</Canvas>

## With actions

<Canvas>
  <Story name="Actions">
    {args => {
      return (
        <>
          <Field
            channel="mobile" locale="fr_FR"
            actions={<>
              <Button level="primary" size="small" ghost onClick={() => {}}>Create</Button>
              <Button level="danger" size="small" ghost onClick={() => {}}>Delete</Button>
            </>}
            {...args}>
            <TextInput placeholder="Type your text here" />
          </Field>
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on fullWidth

<Canvas>
  <Story name="Full width">
    {args => {
      return (
        <Field {...args} fullWidth>
          <TextInput
            placeholder="This field takes the full width of the parent container"
            value=""
            onChange={() => {}}
            characterLeftLabel="250 characters left"
          />
        </Field>
      );
    }}
  </Story>
</Canvas>

## Variation with Block

<Canvas>
  <Story name="Block">
    {args => {
      return (
        <Field {...args} fullWidth>
          <Block title="My label"
            actions={<><Button ghost level="danger" onClick={() => {}} size="small" >
                Button
            </Button></>}
          />
        </Field>
      );
    }}
  </Story>
</Canvas>
